<template>
	<section>
		<headers txt="更换手机"></headers>
		<ul class="mu20 ">
			<li class="bbtm md10 sz30 wallfff flexs plr30  hei100">

				<label for="tel" class="flex_self w25">手机号</label>
				<input id="tel" v-model="tel" class="flex1 sz30" type="tel" placeholder="输入手机号码" />

			</li>
			<li class="bbtm md10 sz30 wallfff flexs plr30  hei100">
				<label for="ver" class="flex_self w25">验证码</label>
				<input for="ver" v-model="ver" class="sz30 w40" type="number" placeholder="输入验证码" />
				<button class="walld44 huefff plr20 rou10 mud10 w35 sz30" type="button" @click="vers" :disabled="isDs" :class="{dis: isDs}">{{ms}}</button>
			</li>
		</ul>
		<button class="btns mu30" type="button" @click="phone">确认</button>
	</section>
</template>

<script>
	import { Toast } from 'mint-ui';
	import { Indicator } from 'mint-ui';
	import Qs from 'qs';
	export default {
		data() {
			return {
				tel: "",
				ver: "",
				isDs: false,
				ms: "获取验证码"
			}
		},
		methods: {
			vers: function() {
				let v = this;
				if(!/^1\d{10}$/.test(v.tel)) {
					Toast("请输入正确号码")
				} else {
					this.$http.get('/WorkMembers/V1.0/SendVer', {
						params: {
							"MembersID": v.tel,
							"Type": "phone"
						}
					}).then((res) => {

						if(res.data.Return_ID == 0) {
							Toast(res.data.Return_Mess);
							v.isDs = true;
							let n = 10, // 倒计时10秒
								sto = setInterval(function() {
									v.ms = n + "s";
									n--;
									n === 0 && (clearInterval(sto), v.isDs = false, v.ms = "获取验证码")
								}, 1000);
						} else {
							Toast(res.data.Return_Mess);
						}

					}).catch((err) => {
						Toast(err);
					});

				}
			},
			phone: function() {
				let v = this;
				if(!/^1\d{10}$/.test(v.tel)) {
					Toast("请输入正确号码")
				} else if(!/^\d{6}$/.test(v.ver)) {
					Toast("请输入6位数验证码")
				} else {
					Indicator.open({
						text: '请求中，请稍等'
					});
					this.$http.post("/WorkMembers/V1.0/EditSafeByBasic", Qs.stringify({
						"MembersID": this.$store.state.MembersID,
						"CodeType": "phone",
						"Code": v.tel,
						"Ver": v.ver

					})).then((res) => {
						Indicator.close();
						if(!res.data.Return_ID) {
							let session = JSON.parse(sessionStorage.infos);
							session.Members_Phone = v.tel;
							sessionStorage.infos = JSON.stringify(session);
						}
						Toast(res.data.Return_Mess);

					}).catch((err) => {
						Indicator.close();
						Toast(err);
					});
				}
			}

		}

	}
</script>

<style scoped>
	.dis {
		background: #999999 !important;
	}
	
	.w40{
		width: 40%;
	}
	.w35{
		width: 35%;
	}
</style>